<template>
  <div class="device_tag_div h-full">
    <el-row class="device_tag">
      <el-col
        :span="24"
        class="flex justify-center items-center h-full flex-col pb-2"
      >
        <!-- <svg-icon icon-class="shuju" class="cursor-pointer w-[60px]! h-[60px]!" /> -->
        <div class="flex justify-center statistic__head">
          {{ params.parameterDesc }}
          :
          {{ seriesData }} {{ params?.measurementUnit }}
        </div>
        <!-- <div class="flex justify-center statistic__number">
          {{ seriesData }}
        </div> -->
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
const props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    },
  },
  seriesData: {
    type: null,
    default: "--",
  },
  params: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
const { seriesData, params } = toRefs(props);

onMounted(() => {});
</script>

<style lang="scss" scoped>
.device_tag_div {
  // width: 50%;
  // height: 200px;
  // float: left;
  text-align: center;
  // height: calc(100% - 45px);
  border-radius: 6px;
  // box-shadow: 0 0 12px rgba(0, 0, 0, 0.04);
  margin: 5px;
  border: 1px solid rgba(0, 0, 0, 0.04);
  // padding: 15px;
  .statistic__number {
    font-size: 16px;
    font-weight: 600;
    color: #303133;
    font-family: DINALT;
  }
  .statistic__head {
    font-size: 14px;
    margin-top: 12px;
    color: #606266;
    line-height: 20px;
    margin-bottom: 4px;
  }
}
</style>
